<template>
  <div>
    <div class="min-container">
      <section class="stepBar">
        <el-steps :active="1" align-center>
          <el-step title="填写订单" />
          <el-step title="订单支付" />
          <el-step title="待审核" />
        </el-steps>
      </section>
      <section class="stepCon">
        <Confirm-payment
          :orderList="orderList"
          :amounts="amounts"
          :nums="nums"
          :ids="ids"
        />
      </section>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { list } from "@/api/control/order";
import { selectUserBalance } from "@/api/pay/pay";
import ConfirmPayment from "@/views/client/cloudMarketplace/components/confirmPayment.vue";
import { useRoute } from "vue-router";
const route = useRoute();

const nums = ref(0); // 总费用
const orderList = ref([]); // 订单列表
const amounts = ref(0); // 余额
const ids = ref(); // 待支付列表ID

onMounted(() => {
  ids.value = route.query.ids;
  getList();
  getBalance();
});

// 获取购物车列表
const getList = () => {
  list({
    params: {
      pageNum: 1,
      pageSize: 1000,
    },
  }).then((res: any) => {
    let list = res.rows;
    orderList.value = list.filter((item: any) => {
      return ids.value.indexOf(item.shoppingCarId) > -1;
    });
    let num = <any>0;
    orderList.value.forEach((item: any) => {
      num += item.updatePrice || 0;
    });
    nums.value = num.toFixed(2) - 0;
  });
};

// 获取余额
const getBalance = () => {
  selectUserBalance({}).then((res: any) => {
    amounts.value = res.data;
  });
};
</script>
<style lang="less" scoped>
.stepBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 117px;
  border: 2px solid #ffffff;
  background: #ffffff;
  box-shadow: -5px 5px 20px 0px #e3e8f080;
  margin: 20px 0;
}
.stepCon {
  width: 100%;
  height: auto;
  padding: 0 30px;
  background: #ffffff;
  margin-bottom: 50px;
}
</style>
